<template>
  <section class="article-list">
    <a class="article-item" href="#" v-for="article in articleList" :key="article.title">
      <div class="left">
        <h3>{{article.title}}</h3>
        <p class="content">{{article.content}}</p>
      </div>
      <div class="right"><img :src="article.img" alt=""></div>
      <div class="author">
        by
        <span>{{article.author}}</span>
      </div>
    </a>
  </section>
</template>

<script>
  export default {
    data() {
      return {
        loading: false,
        error: null,
        articleList: [{
          title: '久慈 | 海女迷妹巡礼',
          content: `列车沿海飞驰，恰逢黄昏时分，景色美得不行。就是这时，发现了沿途的美景——绿地、碧海、白色的海鸟，没错，就是种差海岸！玩玩手机，打打瞌睡，再睁开眼时，窗外已是一片紫蓝色的夜空。上车时坐的满满的车厢，现在已经只有我们两个人了。终于，列车抵达久慈站，包括我俩在内，一共有三个人下了车。作为一个《海女》迷妹，刚走进车站就开始各种激动。才晚上七点多，车站前就异常寂静。 旁边是三陆铁道的小车站，也就是电视剧里的那个车站！各种海女的元素，电视剧的海报，熟悉的...`,
          img: '../assets/images/1.jpg',
          author: '阿猱'
        }]
      }
    }
  }

</script>

<style lang="scss" scoped>
  .article-item {
    display: block;
    text-decoration: none;
    color: #494949;
    padding: 25px 0;
    border-bottom: solid 1px #eee;

    .left {
      float: left;
      width: 75%;
    }

    .right {
      width: 25%;
      float: right;

      img {
        width: 100%;
        vertical-align: middle;
      }
    }

    .content {
      font-size: 12px;
      width: 92%;
      overflow: hidden;
      line-height: 1.2rem;
      color: #aaa;
      height: 3.5rem;
      text-overflow: ellipsis;
      word-wrap: break-word;
      text-align: justify;
    }

    h3 {
      text-align: justify;
      font-size: 17px;
      font-weight: 500;
      margin: 0 6px;
    }

    .author {
      clear: both;
      color: #ccc;
    }
  }

</style>
